import React from 'react';
import ReactDOM from 'react-dom';

//  类组件
class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time: new Date().toLocaleTimeString()
        }
    }

    render() {
        // this.state.time = new Date().toLocaleTimeString() // 这样就会调用了
        return(
            <div>
                <h1>
                    当前时间： {this.state.time}
                </h1>
            </div>
        )
    }

    // 生命周期函数
    componentDidMount() { // 每次修改完成之后
        setInterval(() => {
            console.log(this.state.time);
            // 这样毕业没有调用 
            // this.state.time = new Date().toLocaleTimeString() // 这种方式不行，可
            //  直接调用ReactDOM.render() 这个是可以，不推荐，提示用setState

            // 修改this.setState 数据之后，并不会立即修改Dom里面的内容， react会在这个
            // 函数内容所有设置状态改变后， 统一对比虚拟的Dom对象 ， 然后再统一修改，提升性能
            //  小程序也是借鉴React的这种操作 （批量更新）
            this.setState({ // (3) 这种方式就实现了刷新
                time: new Date().toLocaleTimeString() // 这种方式不行，可
            });
            console.log(this.state.time);
        }, 1000);
    }
}

ReactDOM.render(<Clock />, document.querySelector('#root'));

//  生命周期函数： 渲染完成了之后就会调用声明周期函数

//  因为这样就有了耦合， 所以，这样有点不合理
//  这种方式是不推荐的
// setInterval(() => {
//     ReactDOM.render( // 渲染函数是有调用的
//     <Clock />,
//      document.querySelector('#root')
//     ); // 这个没有效果
//     //  它认为他们都是同一个同喜，为了提高性能， 它不会再进行调用， 构造函数不会调用的
//     // console.log(new Date()); // 这个又改了，
// }, 1000);

/*
1、 构造函数初始化数据，将需要改变的数据初始化到state中
2、切勿直接修改State数据，直接修改State不会宠幸修改渲染内容， 需要使用setState 


*/